<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>handleEvent</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>handleEvent</h1>
		<button id="btn">点这里！</button>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	const buttonElement = document.getElementById('btn');

	// Add a handler for the 'click' event by providing a callback function.
	// Whenever the element is clicked, a pop-up with "Element clicked!" will
	// appear.
	buttonElement.addEventListener('click', function (event) {
		console.log(this)
		alert('Element clicked through function!');
	});

	// 由于兼容性原因，一个带有 handleEvent 函数属性的对象也可以达到相同的效果。
	buttonElement.addEventListener('click', {
		handleEvent: function (event) {
			console.log(this)
			alert('Element clicked through handleEvent property!');
		}
	});
</script>
</body>
</html>